<template>
  <div class="table-wrap">
    <div class="top-tip">
      <slot name="table-left-header">
        <div></div>
      </slot>
      <div class="second-line-right">
        <slot name="table-right-header"></slot>
        <el-button type="primary" @click="handleCurrentChange(pageNum - 1)" :disabled="pageNum === 1">上一页</el-button>
        <div class="page-info">
          <span class="corlor-nor">{{ pageNum }}</span>
          <span>{{ `/${totalNum}` }}</span>
        </div>
        <el-button type="primary" @click="handleCurrentChange(pageNum + 1)"
          :disabled="pageNum >= totalNum">下一页</el-button>
      </div>
    </div>
    <section class="table-container">
      <el-table :data="tableData" border header-align="center" style="width: 100%" class="min-table"
        :cell-style="{ color: '#121529', fontSize: '13px' }" :header-cell-style="{
          background: '#F5F5F5',
          color: '#333333',
          height: '30px',
        }" :row-style="{ height: '48px', padding: 0 }" :span-method="mergeTableMethod" :max-height="tableHeight">
        <el-table-column v-for="(configItem, configIndex) in tableConfig" :key="configIndex" :type="configItem.type"
          :label="configItem.label" :prop="configItem.prop" :align="configItem.align || 'center'"
          :width="configItem.width" :class-name="configItem.className" :fixed="configItem.fixed">
          <template slot-scope="scope">
            <slot v-if="configItem.isCustom" :name="configItem.prop" :row="scope.row" />
            <span v-else-if="configItem.type === 'index'">{{
              scope.$index + 1
            }}</span>
            <span v-else>{{ scope.row[configItem.prop] }}</span>
          </template>
        </el-table-column>

        <template v-if="isCustomEmpty" slot="empty">
          <slot name="empty" />
        </template>
      </el-table>
    </section>

    <div style="text-align: right; margin-top: 30px; position: relative;">
      <slot name="paginationLeftTips" />
      <template v-if="hasPigination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 是否需要进入页面请求
    needRequest: {
      type: Boolean,
      default: true,
    },
    // 表格配置
    tableConfig: {
      type: Array,
      default() {
        return [];
      },
    },
    // 表格数据
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    // 是否分页
    hasPigination: {
      type: Boolean,
      default: true,
    },
    // 自定义空状态
    isCustomEmpty: {
      type: Boolean,
      default: false,
    },
    // 合并单元格的方法
    mergeTableMethod: {
      type: Function,
      default: ({ row, column, rowIndex, columnIndex }) => [1, 1],
    },
    // 总条数
    total: {
      type: Number,
      default: 0,
    },
    // table 高度
    tableHeight: {
      type: String,
      default: '100%',
    },
  },
  computed: {
    totalNum() {
      return Math.ceil(this.total / this.pageSize) || 1;
    },
  },
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
    };
  },

  mounted() {
    if (this.needRequest) {
      this.$emit("getTableList", { pageNum: 1, pageSize: this.pageSize });
    }
  },

  methods: {
    handleCurrentChange(val) {
      this.pageNum = val;
      this.$emit("getTableList", { pageNum: val, pageSize: this.pageSize });
    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.$emit("getTableList", { pageNum: 1, pageSize: this.pageSize });
    },
  },
};
</script>
<style lang="scss" scoped>
.table-wrap {
  .top-tip {
    @include flexalign_cz;
    justify-content: space-between;
    font-size: 12px;
    color: #333333;
  }

  .second-line-right {
    @include flexalign_cz;

    /deep/ .el-button {
      min-width: 73px;
      height: 27px;
      line-height: 27px;
      padding: 0;
      border-radius: 2px;
      color: #333333;
      background-color: #ffffff;
      border: 1px solid #ececeb;
    }

    /deep/ .el-button--warning.is-plain {
      color: #ec6c00;
      background: #fdf0e6;
      border-color: #f7c499;
    }

    /deep/.el-button--primary.is-disabled,
    .el-button--primary.is-disabled:hover,
    .el-button--primary.is-disabled:focus,
    .el-button--primary.is-disabled:active {
      color: #999;
    }

    .page-info {
      margin: 0 13px;

      .corlor-nor {
        color: #ec6c00;
      }
    }
  }

  .table-container {
    margin-top: 11px;

    /deep/ .el-table__row td {
      padding: 0px;
      height: 48px;
    }

    /deep/ .el-table th {
      padding: 0;
    }

    /deep/ .el-table .cell {
      padding-left: 0;
      padding-right: 0;
    }
  }
}
</style>
